import React from 'react';

/**
 * 通用输入框组件
 * @param {Object} props - 组件属性
 * @param {string} props.label - 输入框标签
 * @param {string} props.name - 输入框名称
 * @param {string|number} props.value - 输入框的值
 * @param {function} props.onChange - 值变化处理函数
 * @param {string} [props.type='text'] - 输入框类型
 * @param {string} [props.unit=''] - 单位
 * @param {number} [props.min] - 最小值
 * @param {number} [props.max] - 最大值
 * @param {number} [props.step] - 步进值
 * @returns {JSX.Element}
 */
const InputField = ({ 
  label, 
  name, 
  value, 
  onChange, 
  type = 'text', 
  unit = '', 
  min, 
  max, 
  step,
  disabled = false
}) => {
  // 处理滚轮事件，优先调整数值而非滚动页面
  const handleWheel = (e) => {
    if (type !== 'number') return;
    
    e.preventDefault();
    
    const direction = e.deltaY < 0 ? 1 : -1;
    const stepVal = step || 1;
    const newValue = parseFloat(value) + (direction * stepVal);
    
    // 确保值在范围内
    const constrainedValue = Math.min(max !== undefined ? max : Infinity, 
                              Math.max(min !== undefined ? min : -Infinity, newValue));
    
    // 创建一个模拟事件对象
    const simulatedEvent = {
      target: {
        name,
        value: constrainedValue,
        type
      }
    };
    
    onChange(simulatedEvent);
  };

  return (
    <div className="input-field">
      <label htmlFor={name}>
        {label}
        {unit && <span className="unit">（{unit}）</span>}
      </label>
      <input
        type={type}
        id={name}
        name={name}
        value={value}
        onChange={onChange}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        onWheel={handleWheel}
      />
    </div>
  );
};

export default InputField; 